<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta charset="UTF-8">
    <title>流浪者</title>
</head>
<body>
<div id="content">
    <!--stray info modal box-->
    <div class="modal fade" id="stray-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">流浪者信息</h3>
                    <button type="button" class="close" data-dismiss="modal" @click="reset_info">&times;</button>
                </div>
                <div class="modal-body card">
                    <div class="input-group-sm">
                        <img class="card-image-top" style="width: 100%;" :src="imageUrl(stray.image)">
                        <h5 class="text-primary">{{ stray.userName }}&ensp;发现了它，TA 描述道：{{ stray.description }}</h5>
                        <input type="text" class="form-control" style="width: 90%;" v-model="leftComment" placeholder="输入你的评论">
                        <button class="btn btn-lg btn-link border-0 btn-secondary text-success" @Click="add_comment" v-show="!comment_is_empty">添加评论</button>
                        <h5 class="text-info">大家的评论：</h5>
                        <div class="table-bordered" v-for="comment in comments" :key="comment.id">
                            <span class="text-info">{{ comment.userName }}</span>&ensp;说：{{ comment.content }}
                        </div>
                        <span class="text-danger">&emsp;{{ errorMessage }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--new stray info modal box-->
    <div class="modal fade" id="new-stray-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">添加流浪者信息</h3>
                    <button type="button" class="close" data-dismiss="modal" @click="reset_info">&times;</button>
                </div>
                <div class="modal-body card">
                    <div class="input-group-sm">
                        &ensp;<h6 class="text-primary">图片（输入URL 或从本地选择）</h6>
                        <p>图片URL：</p>
                        <input type="text" class="form-control" id="stray_url" style="width: 100%;" v-model="stray.image" placeholder="请输入流浪者的图片地址"/>
                        <p>本地图片：</p>
                        <label>
                            <input type="file" class="form-control" id="local_stray_image" aria-label="File browser example">
                        </label>

                        <img class="card-image-top" v-show="!image_uploaded" style="width: 100%;" :src="showing_img"/>
                        <img class="card-image-top" v-show="image_uploaded" style="width: 100%;" :src="showing_local_img"/>

                        &ensp;<h6 class="text-primary">描述</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="stray.description" placeholder="描述">
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="!have_empty_fields" @Click="add_stray">确认添加</button>
                        <span class="text-danger">&emsp;{{ message }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--page-->
    <div id="stray-data-box">
        <h3 class="text-secondary">流浪者 <button class="btn btn-sm btn-link border-0 btn-primary float-sm-right"
                                                data-toggle="modal" data-target="#new-stray-info" v-if="is_logged_in"><i class="fa fa-plus-square fa-2x"></i></button></h3>
        <div v-for="stray in strays" :key="stray.id" style="display: inline-block; margin: 3px;">
            <div class="card" style="width: 16rem; ">
                <img class="card-img-top" :src="imageUrl(stray.image)" alt="Card image cap">
                <div class="card-body">
                    <h4>发现者 {{ stray.userName }}</h4>
                    <h6 class="text-info">{{ stray.description }}</h6>
                    <a href="#" class="btn btn-success" data-toggle="modal" data-target="#stray-info" @click="render_modal_box(stray.id)">&ensp;详情&ensp;</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>